package com.csw.compose.ui.module.component.advanced

import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Card
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import androidx.core.content.res.ResourcesCompat
import androidx.core.graphics.drawable.toBitmap
import com.csw.compose.R
import com.csw.compose.theme.pagePadding
import com.csw.compose.ui.Destination
import com.csw.compose.ui.components.BodyText
import com.csw.compose.ui.components.LabelText
import com.csw.compose.ui.components.LargeSpacer
import com.csw.compose.ui.components.MiniSpacer
import com.csw.compose.ui.components.NormalSpacer
import com.csw.compose.ui.components.PrimaryTitle
import com.csw.compose.ui.components.UlItem
import com.csw.compose.ui.module.BasePage

@Preview
@Composable
fun DialogPagePreview() {
    BasePage({}, "对话框（Dialog）") {
        DialogPage()
    }
}

@Preview
@Composable
fun AlertDialogPreview() {
    showAlertDialog(remember { mutableStateOf(true) })
}

@Preview
@Composable
fun DialogPreview() {
    showDialog(remember { mutableStateOf(true) })
}

class DialogPageData {
    companion object : Destination("DialogPage")
}

/**
 *[参考](https://developer.android.google.cn/develop/ui/compose/components/dialog?hl=zh-cn)
 */
@Composable
fun DialogPage() {
    Column(
        modifier = Modifier
            .padding(horizontal = pagePadding)
            .verticalScroll(rememberScrollState())
    ) {
        PrimaryTitle("简介")
        BodyText("Dialog 组件可在 置于主应用内容之上。它会创建干扰性的界面体验，以吸引用户注意力。")

        NormalSpacer()
        val show1 = remember { mutableStateOf(false) }
        showAlertDialog(show1)
        Column(Modifier.clickable {
            show1.value = true
        }) {
            UlItem("AlertDialog")
        }
        LabelText("提醒对话框，与系统的对话框差不多，但用Compose显然在不同版本的系统上可以得到一致的体验")
        LabelText("与系统对话框不同的是，Compose的对话框只提供了容器与排布，所有的图标、文本组件都得自己创建（组件内部有提供默认样式），但这样子自由度也更高了，拿图片作为标题也可以。")

        NormalSpacer()
        val show2 = remember { mutableStateOf(false) }
        showDialog(show2)
        Column(Modifier.clickable {
            show2.value = true
        }) {
            UlItem("Dialog")
        }
        LabelText("对话框，更加基础的版本，可以完全自定义对话框内容的组件")

    }
}

@Composable
fun showAlertDialog(show1: MutableState<Boolean>) {
    if (show1.value) {
        AlertDialog(
            icon = {
                Icon(Icons.Filled.Email, "")
            },
            title = {
                Text("标题")
            },
            text = {
                Column {
                    Text("对话框内容")
                    Text("实际这里面想放啥就放啥，提醒对话框只约束了各组件的排布")
                    Icon(Icons.Filled.Email, "")
                }
            },
            confirmButton = {
                Text("确定", Modifier.clickable {
                    show1.value = false
                })
            },
            dismissButton = {
                Text("取消", Modifier.clickable {
                    show1.value = false
                })
            },
            onDismissRequest = { show1.value = false },
        )
    }
}

@Composable
fun showDialog(show2: MutableState<Boolean>) {
    if (show2.value) {
        Dialog(
            onDismissRequest = { show2.value = false },
        ) {
            Card(
                Modifier
                    .fillMaxWidth(),
                shape = RoundedCornerShape(16.dp)
            ) {
                //动态自适应图标需要这样加载
                ResourcesCompat.getDrawable(
                    LocalContext.current.resources,
                    R.mipmap.ic_launcher_round,
                    LocalContext.current.theme
                )?.toBitmap()?.asImageBitmap()?.let {
                    Image(
                        it,
                        "",
                        contentScale = ContentScale.Crop,
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(160.dp)
                    )
                }
                Column(
                    Modifier.fillMaxWidth(),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    MiniSpacer()
                    Text("标题", style = MaterialTheme.typography.titleLarge)
                    MiniSpacer()
                    Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.End) {
                        Text("取消", Modifier.clickable {
                            show2.value = false
                        }, color = MaterialTheme.colorScheme.primary)
                        NormalSpacer()
                        Text("确定", Modifier.clickable {
                            show2.value = false
                        }, color = MaterialTheme.colorScheme.primary)
                        LargeSpacer()
                    }
                    LargeSpacer()
                }
            }
        }
    }
}
